<!DOCTYPE html>
<html lang="en">
<head>
    <!--includes meta tags, title and more header definitions-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="">
    <title></title>
    <link href="${ctx}/static/mobileweb/assets/css/font-open.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/normalize.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/furatto.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/font-awesome.css" rel="stylesheet" type='text/css'>
    <link href="${ctx}/static/mobileweb/assets/css/znc.css" rel="stylesheet" type='text/css'>
</head>
<body>

<div class="row">
    <div class="login-form">
        <h3>活动报名</h3>
        <br/>
        <form action="${ctx}/mobileweb/mallActivity/enroll" id="check_form" method="post" accept-charset="utf-8">
            <input type="hidden" name="aid" value="${aid!}">
            <input type="hidden" name="mid" value="${mid!}">
            <label for="name">请输入真实姓名:</label>
            <div class="input-addon">
                <input type="text" name="name" id="name" value=""  placeholder="请输入真实姓名"/>
            </div>
            <label for="phone">请输入手机号:</label>
            <input type="tel" name="phone" id="phone" value=""/>

            <input type="submit" id="ok_btn" value="确定" class="button primary"/>
            <input type="button" id="cancel" value="取消" class="button"/>
        </form>
    </div>
</div>

<script id="alert_template" type="text/x-handlebars-template">
    <div class="alert">
        <a href="#" class="close">x</a>
        {{message}}
    </div>
</script>

<script src="${ctx}/static/mobileweb/scripts/jquery-1.7.2.min.js"></script>
<script src="${ctx}/static/scripts/handlebars.js"></script>
<script src="${ctx}/static/scripts/plugins/jquery-form/jquery.form.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/static/mobileweb/assets/js/furatto.min.js"></script>
<script type="text/javascript">
    var alert_tpl = Handlebars.compile($('#alert_template').html());

    $(document).ready(function () {
        $('#check_form').ajaxForm({
            dataType:'json',
            beforeSubmit: function(){
                var name = $('#name').val();
                if (!name) {
                    alert(alert_tpl({message: '请输入真实姓名!'}));
                    return false;
                }

                var regPartton=/1[3-8]+\d{9}/;
                var phone = $('#phone').val();
                if (!phone || !regPartton.test(phone)) {
                    alert(alert_tpl({message: '请输入正确的手机号码!'}));
                    return false;
                }

                return true;
            },
           success: function(data){
               var alert_html = alert_tpl({'message': data.message});
               alert(alert_html);
               window.location.href='${ctx}/mobileweb/mallActivity/showActivityDetal?mid=${mid!}&aid=${aid!}';
           }
        });

        $("#cancel").click(function(){
            history.go(-1);
        });

        var alert = function (html) {
            $('#check_form').prepend(html);
            setTimeout(function () {
                $('#check_form').find('div.alert').slideUp();
            }, 3000)
        }
    });
</script>
</body>
</html>